<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="new_order">
                <el-form
                    ref="formRef"
                    class="form"
                    :model="formData"
                    :rules="rules"
                    label-width="120px"
                    :disabled="pageType == 'look'">
                    <div class="form_item">
                        <el-form-item label="外部订单号" prop="external_order_no">
                            <!-- <el-input v-model="formData.name" placeholder="请输入订单号" maxlength="20" show-word-limit /> -->
                            <el-input
                                v-model="formData.external_order_no"
                                placeholder="请输入订单号"
                                :disabled="!!pageType" />
                        </el-form-item>
                        <el-form-item label="购买客户" prop="cust_id">
                            <div v-if="customerInfo.id" class="cust_box">
                                <el-image class="cust_img" :src="customerInfo.avatar" fit="cover">
                                    <template #error>
                                        <el-icon><icon-picture /></el-icon>
                                    </template>
                                </el-image>
                                {{ customerInfo.name }}
                            </div>

                            <el-button :disabled="!!pageType" @click="openCustomer">选择客户</el-button>
                        </el-form-item>
                        <el-form-item label="订单来源" prop="source_id">
                            <el-select v-model="formData.source_id" placeholder="请选择订单来源">
                                <el-option
                                    v-for="item in sourceList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属员工" prop="belong_uid">
                            <div v-if="belongUidList.length" class="form-staffs">
                                <div class="staffs">
                                    <el-tag
                                        v-for="item in belongUidList"
                                        :key="item.name"
                                        class="staffs_item"
                                        :closable="!pageType"
                                        :type="item.id"
                                        @close="handleClose(item)">
                                        <img class="work-usericon" src="@/assets/image/customer/renyuan_icon.png" />{{
                                            item.name
                                        }}
                                    </el-tag>
                                </div>
                            </div>
                            <el-button :disabled="!!pageType" @click="openDepart">选择员工</el-button>
                        </el-form-item>
                        <el-form-item label="关联商机" prop="business_id">
                            <el-select
                                v-model="formData.business_id"
                                placeholder="请选择关联商机"
                                :disabled="!formData.belong_uid || !!pageType">
                                <el-option
                                    v-for="item in businessList"
                                    :key="item.business_id"
                                    :label="item.name"
                                    :value="item.business_id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                v-model="formData.remark"
                                placeholder="请输入备注"
                                maxlength="150"
                                show-word-limit
                                :rows="3"
                                type="textarea" />
                        </el-form-item>
                    </div>
                    <el-form-item label="选择产品" prop="product">
                        <el-button :disabled="!!pageType" @click="openZWProduct">选择产品</el-button>
                    </el-form-item>
                    <!-- 产品列表 -->
                    <el-form-item v-if="formData.product.length">
                        <div class="total_box">
                            <el-icon class="icon"><Warning /></el-icon>
                            <div class="text"><span style="color: #909399">产品总价</span> ￥{{ totalPrice }}</div>
                            <div class="text"><span style="color: #909399">优惠金额</span>￥{{ discountPrice }}</div>
                            <div class="text">
                                <span style="color: #909399">实付总金额：</span
                                ><span class="amount">￥{{ actualPrice }}</span>
                            </div>
                        </div>
                        <div class="table_box">
                            <el-table
                                :data="productInfo"
                                style="width: 100%"
                                :header-cell-style="{ background: '#fafafa', color: '#909399' }"
                                stripe>
                                <el-table-column prop="date" label="产品信息" width="250">
                                    <template #default="scope">
                                        <div class="product_box">
                                            <el-image class="product_img" :src="scope.row.cover" fit="cover">
                                                <template #error>
                                                    <el-icon><icon-picture /></el-icon>
                                                </template>
                                            </el-image>
                                            <div class="product_info">
                                                <div class="product_name">
                                                    {{ formData.product[scope.$index].product_name }}
                                                </div>
                                                <div class="product_desc">
                                                    规格：{{ formData.product[scope.$index].name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="product_no" label="产品编号" width="100" />
                                <el-table-column prop="sale_price" label="产品售价" width="100">
                                    <template #default="scope">
                                        ￥{{ formData.product[scope.$index].sale_price }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="stock_qty" label="库存" width="70" />
                                <el-table-column prop="buy_qty" label="购买数量" width="150">
                                    <template #default="scope">
                                        <el-input-number
                                            v-model="formData.product[scope.$index].buy_qty"
                                            :min="1"
                                            :max="scope.row.stock_qty"
                                            :controls="false"
                                            :precision="0"
                                            size="small"
                                            placeholder="请输入库存"
                                            :disabled="!!pageType"
                                            @blur="onNumber(scope.$index)" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="discount" label="折扣力度" min-width="100">
                                    <template #default="scope">
                                        <div class="discount">
                                            <el-input-number
                                                v-model="formData.product[scope.$index].discount"
                                                :min="0"
                                                :max="100"
                                                :controls="false"
                                                :precision="0"
                                                size="small"
                                                placeholder="0~100"
                                                :disabled="!!pageType"
                                                @blur="onNumber(scope.$index)" />
                                            <span class="unit-text">%</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="buy_price" label="实付价格" min-width="130">
                                    <template #default="scope">
                                        <div class="discount">
                                            <el-input-number
                                                v-model="formData.product[scope.$index].buy_price"
                                                :min="0"
                                                :controls="false"
                                                :precision="2"
                                                size="small"
                                                placeholder="请输入实付价格"
                                                :disabled="!!pageType" />
                                            <span class="unit-text">元</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="操作" min-width="100" fixed="right">
                                    <template #default="scope">
                                        <el-button
                                            class="delete_btn"
                                            size="small"
                                            :disabled="!!pageType"
                                            @click="onDelete(scope.$index)"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                    <el-form-item label="收货地址" prop="">
                        <div v-if="formData.address_id" class="address">
                            <div class="address_left">
                                <div class="full_name">{{ addressData.full_name }} {{ addressData.mobile }}</div>
                                <div class="full_name">{{ addressData.address }}</div>
                            </div>
                            <div class="address_right" @click="onChooseAddress">切换收货地址</div>
                        </div>
                        <el-button v-else :disabled="!formData.cust_id" @click="onChooseAddress">选择地址</el-button>
                    </el-form-item>
                    <el-form-item label="合同" prop="">
                        <div class="contract_code">
                            <UploadFile @submit="getFile" />
                            <span class="contract_code_desc">文件类型仅支持 pdf，文件大小不可超过20MB</span>
                        </div>
                        <div v-if="formData.contract_code" class="contract_show">
                            <div class="contract_show_left">
                                <img class="contract_show_img" src="/static/file/pdf.png" alt="" />
                                {{ contractData.name }}
                            </div>
                            <el-icon class="contract_show_delete" @click="onContractDelete"><DeleteFilled /></el-icon>
                        </div>
                    </el-form-item>
                    <div class="form_item">
                        <el-form-item label="订单状态" prop="pay_state">
                            <el-select v-model="formData.pay_state" placeholder="请选择订单状态">
                                <el-option
                                    v-for="item in [
                                        { value: 1, name: '未付款' },
                                        { value: 2, name: '已付款' }
                                    ]"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="btn_box"></div>
            </div>
            <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
            <ZWCustomer ref="ZWCustomerRef" @submit="getCustomer" />
            <ZWAddress ref="ZWAddressRef" @submit="getAddress" />
            <ZWProduct v-if="productVsible" ref="ZWProductRef" @submit="getProductr" @close="closeProduct" />
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="router.back()">{{ pageType == 'look' ? '返回' : '取消' }}</el-button>
            <template v-if="pageType != 'look'">
                <el-button type="primary" @click="onSubmit(formRef, 'AND')">保存并提审</el-button>
                <el-button type="primary" @click="onSubmit(formRef, 'OR')">保存</el-button>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ZWDepart from '@/components/ZWDepart.vue';
import ZWCustomer from '@/components/ZWCustomer.vue';
import ZWAddress from './ZWAddress.vue';
import ZWProduct from '@/components/ZWProduct.vue';
import UploadFile from './UploadFile.vue';
import { getOrderAuditInfo } from '@/api/salesleads/ordermanagement/orderlist';
import { businessDetail } from '@/api/salesleads/salesmanagement/business';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getOrderSeniorlist, orderCreate, orderEdit, getOrderInfo } from '@/api/salesleads/ordermanagement/orderlist';
import { getBusinessSelect } from '@/api/salesleads/common';
import { mul, div, add, sub } from '@/utils/math';
import { getSetionId, IsNotEmpty } from '@/utils/utils';
import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const pageType = route.query.type;
const formRef = ref<any>();
const DepartRef = ref<any>();
const productVsible = ref<boolean>(false);
const formData: any = ref({
    type: 1, //1 保存 2 保存并审核
    external_order_no: '', //外部订单号
    cust_id: '', //客户id
    source_id: '', //订单来源
    belong_uid: '', //归属员工id
    business_id: '', //商机id
    remark: '', //备注
    product: [
        // {
        //   product_id: '', //产品id
        //   stock_id: '',
        //   name: '', // 规格名称
        //   product_name: '', //产品名称
        //   sale_price: 0, //产品售价
        //   buy_price: 0, //产品购买价格
        //   buy_qty: 0, //产品购买数量
        //   discount: 0 //产品折扣
        // }
    ], //产品数组
    address_id: '', //地址id
    contract_code: '',
    pay_state: ''
});
const rules = reactive({
    external_order_no: [{ required: true, message: '请输入订单编号', trigger: 'blur' }],
    cust_id: [{ required: true, message: '请选择购买客户', trigger: 'blur' }],
    source_id: [{ required: true, message: '请选择订单来源', trigger: 'blur' }],
    belong_uid: [{ required: true, message: '请选择所属员工', trigger: 'blur' }],
    business_id: [{ required: true, message: '请选择关联商机', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
    product: [{ required: true, message: '请输产品', trigger: 'blur' }],
    address_id: [{ required: true, message: '请选择地址', trigger: 'blur' }],
    contract_code: [{ required: true, message: '请上传合同', trigger: 'blur' }],
    pay_state: [{ required: true, message: '请选择付款状态', trigger: 'blur' }]
});

// 商机列表
const businessList = ref<any>([]);
const getBusinessList = (id: any) => {
    getBusinessSelect({ state: 12, belong_uid: id }).then((res: any) => {
        businessList.value = res;
        formData.value.business_id = formData.value.business_id || res[0]?.business_id;
    });
};
//选择员工
const belongUidList: any = ref([]);
const openDepart = () => {
    DepartRef.value.multiple = false;
    DepartRef.value.selectedMember = [...belongUidList.value];
    DepartRef.value.departVisble = true;
};
// 获取部门成员
const getDepart = (res: any) => {
    belongUidList.value = res;
    formData.value.belong_uid = getSetionId('id', belongUidList.value)[0];
    getBusinessList(formData.value.belong_uid);
};
// 员工移除
const handleClose = (tag: any) => {
    belongUidList.value = belongUidList.value.filter((item: any) => item.id !== tag.id);
    formData.value.belong_uid = '';
    formData.value.business_id = '';
    DepartRef.value.removeItem(tag);
};
// 选择客户
const ZWCustomerRef = ref<any>(null);
const customerInfo: any = ref({
    id: '',
    name: '',
    avatar: ''
});
const openCustomer = () => {
    ZWCustomerRef.value.appDialog.row = customerInfo.value;
    ZWCustomerRef.value.appDialog.visible = true;
};
// 获取客户信息
const getCustomer = (v: any) => {
    formData.value.cust_id = v.id;
    customerInfo.value = {
        id: v.id,
        name: v.type == 1 ? v.cust_baseinfo.name : v.corp_name,
        avatar: v.type == 1 ? v.cust_baseinfo.avatar : v.avatar
    };
};
// 选择地址
const ZWAddressRef = ref<any>();
const addressData = ref<any>({});
const onChooseAddress = () => {
    if (formData.value.cust_id && pageType != 'look') {
        ZWAddressRef.value.handleaddressDialog(formData.value.cust_id);
    }
};
const getAddress = (v: any) => {
    addressData.value = v;
    formData.value.address_id = v.id;
};
// 选择产品
const ZWProductRef = ref<any>();
const openZWProduct = () => {
    productVsible.value = true;
    nextTick(() => {
        ZWProductRef.value.visible = true;
    });
};
const productInfo = ref<any>([]);
const getProductr = (v: any) => {
    productVsible.value = false;
    v.forEach((item: any) => {
        // 无规格产品
        if (item.spec_type == 1) {
            const index = formData.value.product.findIndex((it: any) => it.product_id == item.product_id);
            if (index == -1) {
                formData.value.product.push({
                    product_id: item.product_id, //产品id
                    stock_id: '', // 规格id
                    name: '', // 规格名称
                    product_name: item.product_name, //产品名称
                    sale_price: item.sale_price, //产品售价
                    buy_price: item.sale_price, //产品购买价格
                    buy_qty: 1, //产品购买数量
                    discount: 100 //产品折扣
                });
                productInfo.value.push({
                    product_no: item.product_no,
                    cover: item.cover,
                    stock_qty: item.stock_qty
                });
            } else {
                formData.value.product[index].buy_qty++;
                if (formData.value.product[index].buy_qty <= item.stock_qty) {
                    formData.value.product[index].buy_price = mul(
                        item.sale_price,
                        formData.value.product[index].buy_qty
                    );
                }
            }

            // 有规格产品
        } else {
            if (item.spec_type == 2) {
                // && formData.value.product.every((it: any) => it.stock_id != item.specificate_list[item.selected].id)
                const index = formData.value.product.findIndex(
                    (it: any) => it.stock_id == item.specificate_list[item.selected].id
                );
                if (index == -1) {
                    formData.value.product.push({
                        product_id: item.product_id, //产品id
                        stock_id: item.specificate_list[item.selected].id, // 规格id
                        name: item.specificate_list[item.selected].options_vals, // 规格名称
                        product_name: item.product_name, //产品名称
                        sale_price: item.specificate_list[item.selected].sale_price, //产品售价
                        buy_price: item.specificate_list[item.selected].sale_price, //产品购买价格
                        buy_qty: 1, //产品购买数量
                        discount: 100 //产品折扣
                    });
                    productInfo.value.push({
                        product_no: item.product_no,
                        cover: item.cover,
                        stock_qty: item.specificate_list[item.selected].stock_qty
                    });
                } else {
                    formData.value.product[index].buy_qty++;
                    if (formData.value.product[index].buy_qty <= item.specificate_list[item.selected].stock_qty) {
                        formData.value.product[index].buy_price = mul(
                            formData.value.product[index].sale_price,
                            formData.value.product[index].buy_qty
                        );
                    }
                }
            }
        }
    });
};

const closeProduct = () => {
    productVsible.value = false;
};

// 产品总价
const totalPrice: any = computed(() => {
    let total: any = 0;
    formData.value.product.forEach((item: any, index: any) => {
        total = add(total, mul(item.sale_price, item.buy_qty));
    });
    return total;
});
// 优惠金额
const discountPrice = computed(() => {
    let total: any = 0;
    formData.value.product.forEach((item: any, index: any) => {
        total = add(total, mul(mul(item.sale_price, item.buy_qty), div(sub(100, item.discount), 100)));
    });
    return total;
});
// 实付总金额
const actualPrice = computed(() => {
    let total: any = 0;
    formData.value.product.forEach((item: any) => {
        total = add(total, item.buy_price);
    });
    return total;
});
const onDelete = (index: number) => {
    productInfo.value.splice(index, 1);
    formData.value.product.splice(index, 1);
};
const onNumber = (index: number) => {
    // 数量 * 价格
    const sum = mul(formData.value.product[index].buy_qty, formData.value.product[index].sale_price);
    // / 折扣
    formData.value.product[index].buy_price = div(mul(sum, formData.value.product[index].discount), 100);
};
const onSubmit = async (formEl: any, type?: any) => {
    if (!formEl) return;
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            if (
                formData.value.product.every((item: any) => item.buy_price > 0 && item.buy_qty > 0 && item.discount > 0)
            ) {
                type == 'AND' && (formData.value.type = 2);
                type == 'OR' && (formData.value.type = 1);
                pageType
                    ? getOrderAuditInfo().then((res: any) => {
                          if (res.state == 1 && formData.value.type == 2) {
                              ElMessage.warning('高级设置审核审核已关闭');
                              return;
                          }
                          orderEdit(formData.value).then((res: any) => {
                              router.back();
                              ElMessage.success('编辑订单成功');
                          });
                      })
                    : orderCreate(formData.value).then((res: any) => {
                          router.back();
                          ElMessage.success('新建订单成功');
                      });
            } else {
                ElMessage.warning('请设置所选产品参数');
            }
        } else {
        }
    });
};

// 上传合同
const contractData = ref({
    name: '',
    code: '',
    url: ''
});
const getFile = (v: any) => {
    contractData.value = v;
    formData.value.contract_code = v.code;
};
const onContractDelete = () => {
    pageType != 'look' && (formData.value.contract_code = '');
};
// 订单来源列表
const sourceList = ref<any>([]);
const getSeniorlist = () => {
    getOrderSeniorlist({ state: 2 }).then((res: any) => {
        sourceList.value = res;
    });
};

// watch(
//   () => formData.value.belong_uid,
//   (v) => {
//     if (!route.query.businessid) {
//       pageType || (formData.value.business_id = businessList.value.find((item: any) => item.belong_uid == v)?.id)
//     }
//   }
// )
const getLook = () => {
    getOrderInfo({ id: route.query.id }).then((res: any) => {
        formData.value = {
            type: 1,
            id: res.id,
            external_order_no: res.external_order_no,
            cust_id: res.cust_id,
            source_id: res.source_id,
            belong_uid: res.belong_uid,
            business_id: res.business_id,
            remark: res.remark,
            product: [],
            address_id: res.address_id,
            contract_code: res.file_info.code,
            pay_state: res.pay_state
        };
        sourceList.value.map((item: any) => {
            if (item.id !== res.source_id) {
                sourceList.value.push({
                    id: res.source_id,
                    name: res.source_name
                });
            }
        });
        // 员工信息
        belongUidList.value = [
            {
                check: true,
                id: res.belong_uid,
                name: res.belong_uid_name,
                type: 'user'
            }
        ];
        getBusinessList(formData.value.belong_uid);
        // 客户信息
        customerInfo.value.id = res.cust_id;
        customerInfo.value.name = res.cust_name;
        customerInfo.value.avatar = res.cust_avatr;
        // 地址
        addressData.value = res.delivery_address[0];
        // 上传合同
        contractData.value = res.file_info;
        // 产品
        res.data.forEach((item: any) => {
            productInfo.value.push({
                product_no: item.product_no,
                cover: item.url,
                stock_qty: item.stock
            });
            formData.value.product.push({
                product_id: item.product_id, //产品id
                stock_id: item.stock_id, // 规格id
                name: item.name, // 规格名称
                product_name: item.product_name, //产品名称
                sale_price: item.sale_price, //产品售价
                buy_price: item.buy_price, //产品购买价格
                buy_qty: item.buy_qty, //产品购买数量
                discount: item.discount //产品折扣
            });
        });
    });
};
const onBusinessCreateOrder = () => {
    businessDetail({ business_id: route.query.businessid }).then((res: any) => {
        formData.value = {
            type: 1,
            external_order_no: '',
            cust_id: res.cust_id,
            source_id: '',
            belong_uid: res.belong_info.id,
            business_id: res.business_id,
            remark: '',
            product: [],
            address_id: '',
            contract_code: '',
            pay_state: ''
        };
        // 客户信息
        customerInfo.value.id = res.cust_id;
        customerInfo.value.name = res.cust_info.name;
        customerInfo.value.avatar = res.cust_info.avatar;
        // 员工
        // 员工信息
        belongUidList.value = [
            {
                check: true,
                type: 'user',
                ...res.belong_info
            }
        ];
        getBusinessList(formData.value.belong_uid);
        // 产品
        res.product_list.forEach((item: any) => {
            productInfo.value.push({
                product_no: item.product_no,
                cover: item.cover,
                stock_qty: item.stock_qty
            });
            formData.value.product.push({
                product_id: item.product_id, //产品id
                stock_id: item.stock_id, // 规格id
                name: item.stock_name, // 规格名称
                product_name: item.product_name, //产品名称
                sale_price: item.sale_price, //产品售价
                buy_price: item.buy_price, //产品购买价格
                buy_qty: item.buy_qty, //产品购买数量
                discount: item.discount //产品折扣
            });
        });
    });
};
onMounted(() => {
    getSeniorlist();
    pageType && getLook();
    route.query.businessid && onBusinessCreateOrder();
});
</script>
<style lang="scss" scoped>
.new_order {
    padding: 24px;
}

.unit-text {
    margin-left: 4px;
}

.form {
    .form_item {
        width: 50%;
    }

    .el-form-item {
        .el-select {
            width: 100%;
        }
    }
}

.el_image {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

// 员工选择
.form-staffs {
    display: flex;
    margin-bottom: 10px;

    .title {
        margin-right: 12px;
    }

    .staffs {
        .work-usericon {
            width: 10px;
            height: 12px;
            vertical-align: middle;
            margin-right: 8px;
        }

        .staffs_item {
            user-select: none;
            cursor: pointer;
            height: auto;
            line-height: normal;
            padding: 9px 12px;
            border-radius: 4px;
            border: 1px solid #ffc69e;
            background-color: #fffaf9;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #ff6b00;
            margin: 12px 6px 0;

            :deep(.el-tag__close) {
                margin-left: 14px;

                --el-tag-hover-color: #ff6b00;
            }
        }
    }
}

// 客户信息
.cust_box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .cust_img {
        width: 48px;
        height: 48px;
        margin-right: 8px;
        font-size: 30px;
        display: grid;
        place-content: center;
    }
}

.item {
    width: 40%;
}

.total_box {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #fffaf9;
    border: 1px solid #ffc69e;
    color: #33302d;

    .icon {
        width: 30px;
        font-size: 16px;
        color: #ff6b00;
    }

    .text {
        margin-right: 10px;
    }

    .amount {
        color: #ff6b00;
    }
}

.table_box {
    .product_box {
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-gap: 7px;

        .product_img {
            width: 48px;
            height: 48px;
            font-size: 40px;
            display: grid;
            place-content: center;
        }

        .product_info {
            padding: 5px 0;

            .product_name {
                width: 180px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                height: 24px;
                font-size: 14px;
            }

            .product_desc {
                height: 24px;
                font-size: 12px;
                color: #969696;
            }
        }
    }
}

.discount {
    display: flex;
    align-items: center;

    .num {
        margin-left: 10px;
        color: #969696;
    }
}

:deep(.el-card__header) {
    padding: 0;
    background-color: #f9f9f9;
}

:deep(.el-card__body) {
    padding: 20px;
}

.header {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 40px;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: black;
}

.centent {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 60px;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: black;

    &:nth-child(even) {
        background-color: #f9f9f9;
    }

    &:hover {
        background-color: #f5f7fa;
    }

    .product_info {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-gap: 5px;
        align-items: center;

        .left_img {
            width: 40px;
            height: 40px;
        }

        .right_text {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-gap: 7px;
            padding: 3px 0;

            .right_t {
                font-size: 14px;
            }

            .right_b {
                font-size: 12px;
                color: #969696;
            }
        }
    }
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-gap: 15px 20px;
    padding-right: 20px;
    margin-bottom: 16px;

    .groupchat {
        display: flex;
        align-items: center;
        position: relative;
        width: 200px;
        padding: 3px;
        border-radius: 2px;
        border: 1px solid #ffc69e;

        .groupchat_left {
            width: 36px;
            height: 36px;
            margin-right: 8px;
        }

        .groupchat_right {
            .groupchat_right_t {
                font-size: 14px;
                margin-bottom: 5px;
            }

            .groupchat_right_b {
                font-size: 12px;
                color: #969696;
            }
        }

        .icon_box {
            position: absolute;
            top: -13px;
            right: -11px;
            cursor: pointer;
            color: #dfdfdf;
            font-size: 20px;
        }
    }
}

.group_box {
    display: flex;
    align-items: center;
    color: #969696;
    font-size: 14px;

    span {
        margin-left: 10px;
    }
}

.address {
    padding: 16px;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f7f7;

    &_left {
        .full_name {
            margin-right: 6px;
            line-height: 20px;
        }

        .full_name:nth-child(1) {
            margin-bottom: 8px;
        }
    }

    &_right {
        cursor: pointer;
        color: #ff6b00;
    }
}

// 合同
.contract_code {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .contract_code_desc {
        margin-left: 10px;
        font-size: 14px;
        color: #969696;
    }
}

.contract_show {
    width: 440px;
    height: 32px;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;

    .contract_show_left {
        display: flex;
        align-items: center;

        .contract_show_img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
    }

    .contract_show_delete {
        cursor: pointer;

        &:hover {
            color: red;
        }
    }
}

.btn_box {
    padding-top: 20px;
    text-align: center;
}

.delete_btn {
    margin-bottom: -8px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 24px;
    margin: 0 4px 8px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    text-align: center;
    background: #fff;
}
</style>
